<template>
    <div class="tabs">
        <div @click="onPhoneChange(index, item.path)" :class="$route.path == item.path ? 'active' : ''"
            v-for="(item, index) in tabsPhone" :key="index">
            <i :class="item.icon"></i>
            {{ item.text }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'TabsPhone',
    data() {
        return {
            tabsPhoneIndex: 0,
            tabsPhone: [
                { text: "首页", icon: "el-icon-s-home", path: "/teacher" },
                { text: "应用", icon: "el-icon-menu", path: "/application-phone" },
                { text: "待办", icon: "el-icon-time", path: "" },
                { text: "我的", icon: "el-icon-user-solid", path: "" },
            ],
        }
    },
    methods: {
        onPhoneChange(i, path) {
            this.$router.push(path)
        }

    }
}
</script>


<style lang="scss" scoped>
.tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-top: 1px solid #c2c1c1;

    &>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        color: #999;
        flex: 1;

        i {
            font-size: 28px;
            margin-bottom: 8px;
        }

        &.active {
            color: #0D67BB;

            i {
                color: #0D67BB;
            }
        }
    }
}
</style>